<template>
  <div class="relation-container">
     <template v-if="loading">
       <el-col >
         <el-button round class="Relation-button" disabled>
           <i class="el-icon-loading"></i> 加载中...
         </el-button>
       </el-col>
     </template>
     <template v-else>
       <el-col  v-for="(item, index) in Relationmessages" :key="index">
   
           <el-button round class="Relation-button" @click="buttonClicked(item)">
             {{ item.message }}
           </el-button>
       </el-col>
     </template>
   </div>
 </template>
 <script>
 export default {
   // 使用 props 接收父组件传递的数据
   props: {
     question: {
       type: String,
       require: true,
     },
   },
   data() {
     return {
       loading: false,
       Relationmessages: [
         {
           title: "关联查询",
           message: "加载中.....",
         },
       ],
     };
   },
   created() {
     if (this.question) {
       this.handle_get_similar_query(this.question);
     }
   },
   methods: {
     buttonClicked(item) {
       //将数据放入聊天框//采用事件发送的形式
       this.$emit("send-message", item);
     },
     /**
      * 向后端发送请求获取‘猜你想问’的数据
      * @param msg 问询消息
      */
     handle_get_similar_query(msg) {
       this.loading = true;
       console.log("向后端发送请求msg:", msg); // 检查 msg 是否有正确的值
       this.$axios({
         url: "http://121.41.97.114:5001/similar_query",
         method: "POST",
         timeout: 50000,
         data: {
           input: msg,
         },
         headers: {
           "Content-Type": "application/json",
         },
       })
         .then((response) => {
           if (response.data.Code === 200 && response.data.data.length > 0) {
             const originalData = response.data.data;
             console.log("猜你想问-2", originalData);
 
             const formattedData = originalData.map((item) => ({
               title: "关联查询",
               message: item[0],
             }));
             this.Relationmessages = formattedData;
           } else {
             console.error("请求失败(猜你想问的数据)");
             this.$message({
               message: "失败",
               type: "warning",
               duration: 2000,
             });
             this.localRelationMessages = [
               {
                 title: "关联查询",
                 message: "获取推荐失败，点击重试",
               },
             ];
           }
         })
         .catch((error) => {
           this.$message({
             message: "获取推荐问题失败，请稍后重试",
             type: "error",
           });
           console.error(error);
           console.log("请求超时");
           this.RelationMessages = [
             {
               title: "关联查询",
               message: "获取推荐失败，点击重试",
             },
           ];
         })
         .finally(() => {
           this.loading = false;
         });
     },
     // 检查文本是否溢出
     isTextOverflow(event) {
       const button = event?.target;
       if (button) {
         return button.scrollWidth > button.clientWidth;
       }
       return false;
     },
     // getAllRelationObject() {
     //   //后端接口待修改
     //   this.$axios({
     //     url: "https://121.41.97.114:5000/",
     //     method: "Get",
     //     timeout: 20000,
     //   })
     //     .then((Response) => {
     //       this.Relationmessages = Response.data;
     //     })
     //     .catch((error) => {
     //       this.$message({
     //         message: "网络连接超时，请联系管理员",
     //         type: "error",
     //       });
     //       console.error(error);
     //       console.log("请求超时");
     //     });
     // },
   },
 };
 </script>
 <style scoped>
 .relation-container {
   width: 100%;
   position: relative;
   z-index: 1; /* 确保不会被其他元素覆盖 */
 }
 
 .relation-buttons-wrapper {
   display: flex;
   flex-direction: column;
   gap: 3px;
   width: 200px; /* 固定宽度 */
 }
 .Relation-button {
   width: 200px;
   margin: 3px 0; /* 设置上下边距为5px，左右边距为0 */
   /* 添加省略样式 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* 鼠标悬停时的样式 */
 .Relation-button:hover {
   overflow: visible;
   text-overflow: clip;
   background-color: #f5f7fa;
 }
 
 .el-tooltip {
   width: 100%;
   display: flex;
   justify-content: center;
 }
 
 /* 如果按钮在加载状态下 */
 .Relation-button.is-loading {
   cursor: not-allowed;
   opacity: 0.8;
 }
 
 /* 可以添加过渡效果 */
 .Relation-button {
   transition: all 0.3s;
 }
 </style>